<template>
  <template v-if="fullScreenPage.indexOf(routerInstance.currentRoute.value.path) == -1">
    <Header/>
    <div class="w-full h-full flex bg-slate-300">
      <!-- 左侧菜单 -->
      <div class=" bg-gray-50 border-r border-gray-200">
        <div class="mt-6">
          <el-button type="primary" @click="isCollapse = !isCollapse" title="展开/折叠">
            <el-icon v-if="isCollapse">
              <DArrowRight/>
            </el-icon>
            <el-icon v-else>
              <DArrowLeft/>
            </el-icon>
          </el-button>
          <el-menu
              ref="menu-ref"
              :collapse="isCollapse"
              class="px-6 py-3 text-sm font-medium cursor-pointer"
              default-active="3"
          >
            <template
                v-for="(item,index) in menuRoutes"
                :key="item.path">
              <template v-if="item.children !== undefined">
                <el-sub-menu :index="index.toString()">
                  <template #title>
                    <el-icon>
                      <component :is="item.meta?.icon"></component>
                    </el-icon>
                    <span>
                      {{ item.meta?.title || item.name }}
                    </span>
                  </template>
                  <template v-for="(child, innerIndex) in item.children" :key="child.path">
                    <el-menu-item
                      v-if="checkPermission(child.meta?.permission, Action.view)"
                      :index="index.toString() + innerIndex"
                      @click="handleMenuClick(child.path)">
                      <template #title>
                        {{ child.meta?.title || child.name }}
                      </template>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>
              <template v-else>
                <el-menu-item :index="index.toString()"
                              v-if="checkPermission(item.meta?.permission, Action.view)"
                              @click="handleMenuClick(item.path)">
                  <el-icon>
                    <component :is="item.meta?.icon"></component>
                  </el-icon>
                  <template #title>
                    {{ item.meta?.title || item.name }}
                  </template>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="p-2 w-full h-full">
        <router-view></router-view>
      </div>
    </div>
  </template>
  <template v-else>
    <router-view/>
  </template>
</template>
<script setup lang="ts">
import Header from "./layout/Header.vue";
import {computed, ref, useTemplateRef, watchEffect} from "vue";
import {useRouter} from 'vue-router'
import router from './router'
import {DArrowLeft, DArrowRight} from "@element-plus/icons-vue";
import {useMenuStore} from "./store/menuStore.ts";
import {storeToRefs} from "pinia";
import {type MenuInstance} from "element-plus";
import {useUserStore} from "./store/userStore.ts";
import {Action} from "./types/permissions.ts";

const routerInstance = useRouter()

const isCollapse = ref(false)

const fullScreenPage = ['/login', '/dashboard'];

let {checkPermission} = useUserStore();

const menuStore = useMenuStore();
let {activeMenuPath} = storeToRefs(menuStore);
const menuRef = useTemplateRef<MenuInstance>('menu-ref');

// 获取路由配置中的子路由，用于动态生成菜单
const menuRoutes = computed(() => {
  const rootRoute = router.options.routes.find(r => r.path === '/')
  return rootRoute?.children || []
})
// dashboard跳转到功能页面，左侧菜单同步选中状态
watchEffect(() => {
  const index = menuRoutes.value.findIndex((route) => {
    return route.path == activeMenuPath.value;
  });
  menuRef.value?.updateActiveIndex(String(index));
})
// 点击左侧菜单跳转
const handleMenuClick = (path: string) => {
  routerInstance.push(path)
}
</script>
